<div
  class="modal fade"
  data-backdrop="static"
  id="inline-source-modal"
  v-kb-modal="isShow"
>
  <div class="modal-dialog" v-if="isShow" :class="{'modal-lg':id}">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" @click="reset"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{Kooboo.text.common[_.capitalize(title)]}}</h4>
      </div>
      <div v-if="id">
        <kb-code-editor
          :lang="lang"
          auto-size
          :code.sync="text"
          style="height: 400px;"
          ref="codeEditor"
        >
        </kb-code-editor>
      </div>
      <div v-else class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-md-2"
              >{{Kooboo.text.common[_.capitalize(title)]}}</label
            >
            <div class="col-md-10">
              <select class="form-control" v-model="text">
                <optgroup :label="Kooboo.text.component.styleScript.files">
                  <option
                    v-for="(item,index) in files"
                    :key="index"
                    :value="{url:item.url,name:item.text}"
                    >{{item.text}}</option
                  >
                </optgroup>
                <optgroup :label="Kooboo.text.component.styleScript.groups">
                  <option
                    v-for="(item,index) in groups"
                    :key="index"
                    :value="{url:item.url,name:item.text}"
                    >{{item.text}}</option
                  >
                </optgroup>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button v-if="id" @click="formatCode" class="btn btn-default"
          >Format code</button
        >
        <button class="btn green" :disabled="!isResourceExist" @click="save"
          >{{Kooboo.text.common.save}}</button
        >
        <button class="btn gray" @click="reset"
          >{{Kooboo.text.common.cancel}}</button
        >
      </div>
    </div>
  </div>
</div>
